<!DOCTYPE html>
<html lang="en" x-data="{ currentPage: 'home', isCollapsed: false, isRunning: false }"
  x-on:playwright-started.window="isRunning = true" x-on:playwright-finished.window="isRunning = false"
  class="overflow-hidden">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tauri HTMX</title>
  <script src="js/lib/cdn.min.js" defer></script>
  <script src="js/main.js"></script>
  <link href="css/tailwind.css" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
</head>

<body class="bg-gradient-to-r from-blue-50 to-purple-50">
  <!-- 整体布局 -->
  <div class="flex min-h-screen">
    <!-- 左侧导航栏 -->
    <nav :class="{ 'w-64': !isCollapsed, 'w-16': isCollapsed }"
      class="bg-white shadow-lg p-4 transition-all duration-300">
      <!-- 收缩/展开按钮 -->
      <button @click="isCollapsed = !isCollapsed"
        class="w-full flex items-center justify-center p-2 mb-4 rounded-lg hover:bg-gray-100 transition duration-300">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path x-show="!isCollapsed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12" />
          <path x-show="isCollapsed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

      <!-- 导航栏内容 -->
      <ul class="space-y-2">
        <li>
          <button @click="currentPage = 'home'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'home' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">首页</span>
          </button>
        </li>
        <li>
          <button @click="currentPage = 'about'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'about' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">关于</span>
          </button>
        </li>
        <li>
          <button @click="currentPage = 'contact'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'contact' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">联系</span>
          </button>
        </li>
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <div class="flex-1 p-8 flex flex-col">
      <!-- 首页 -->
      <div x-show="currentPage === 'home'" class="space-y-4 flex-1 flex flex-col">
        <h1 class="text-3xl font-bold text-gray-800">欢迎来到首页</h1>
        <p class="text-gray-600">欢迎使用 Tauri Python 项目，这里是项目的展示页面。</p>

        <!-- 运行测试按钮 -->
        <div class="flex justify-center space-x-4">
          <!-- 运行测试按钮 -->
          <button @click="run_playwright()" :disabled="isRunning" class="btn-primary">
            <span x-show="!isRunning">运行测试</span>
            <span x-show="isRunning" class="flex items-center">
              <svg class="animate-spin h-5 w-5 text-white mr-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                </path>
              </svg>
              运行中...
            </span>
          </button>
          <!-- 清空结果按钮 -->
          <button @click="clear_playwright_result()" class="btn-primary">
            清空结果
          </button>
        </div>

        <!-- 测试结果列表 -->
        <div class="mt-6 flex-1 overflow-hidden">
          <div class="w-full bg-white shadow-lg rounded-lg p-6 h-full overflow-y-auto" style="max-height: 66vh;"
            id="playwright-result">
            <!-- 添加 max-h-96 或其他合适的高度 -->
            <ul class="list-disc list-inside text-gray-600 space-y-2" id="playwright-result">

            </ul>
          </div>
        </div>
      </div>

      <!-- 关于页面 -->
      <div x-show="currentPage === 'about'" class="space-y-4">
        <h1 class="text-3xl font-bold text-gray-800">关于</h1>
        <p class="text-gray-600">我是 Tauri Python 项目的作者，欢迎来到这里！</p>
      </div>

      <!-- 联系页面 -->
      <div x-show="currentPage === 'contact'" class="space-y-4">
        <h1 class="text-3xl font-bold text-gray-800">联系</h1>
        <p class="text-gray-600">你可以通过以下方式联系我：</p>
        <ul class="list-disc list-inside text-gray-600">
          <li>Email: 947105045@qq.com</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>